/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d'),
        FONT_HIGHT = 25,
        MARGIN = 50,
        HAND_TRUNCATION = canvas.width / 25,//秒针
        HOUR_HAND_TRUNCATION = canvas.width / 5,//时针
        MINUTE_HAND_TRUNCATION = canvas.width / 15,//分针
        NUMERAL_SPACING = 25,
        RADIUS = canvas.width / 2 - MARGIN,//半径
        HAND_RADIUS = RADIUS + NUMERAL_SPACING;

//console.log(canvas.width);
function showCanvas(){
    context.beginPath();//开始定义不可见路径
    context.rect(0,0,canvas.width,canvas.height);//创建一个矩形的不可见路径
    context.stroke();//描绘路径边缘
}

//钟表的外圆
function drawCircle(){
    context.beginPath();//开始定义不可见路径
    context.arc(canvas.width / 2,canvas.height / 2,RADIUS,0,Math.PI * 2);//创建一个圆形的不可见路径
    context.stroke();//描绘路径边缘
//    context.fill();//对路径的内部进行填充
}

//画钟表中心实心圈
function drawCenter(){
    context.beginPath();//开始定义不可见路径
    context.arc(canvas.width / 2,canvas.height / 2,10,0,Math.PI * 2);//创建一个圆形的不可见路径
//    context.stroke();//描绘路径边缘
    context.fill();//对路径的内部进行填充
}

//写圆周围写数字
function drawNumerals(){
    /**
     * 
     * Math.sin(x)      x 的正玄值。返回值在 -1.0 到 1.0 之间；

        Math.cos(x)    x 的余弦值。返回的是 -1.0 到 1.0 之间的数；

        这两个函数中的X 都是指的“弧度”而非“角度”，弧度的计算公式为： 2*PI/360*角度；

        30° 角度 的弧度 = 2*PI/360*30



        如何得到圆上每个点的坐标？

        解决思路：根据三角形的正玄、余弦来得值；

        假设一个圆的圆心坐标是(a,b)，半径为r，

        则圆上每个点的X坐标=a + Math.sin(2*Math.PI / 360) * r ；Y坐标=b + Math.cos(2*Math.PI / 360) * r ；
     */
    var numerals = [1,2,3,4,5,6,7,8,9,10,11,12],
            angle = 0,
            numeralWidth = 0;
    numerals.forEach(function(numeral){
          angle = Math.PI/6 *(numeral +9);//弧度（角度）
//          angle = 2*Math.PI/360 *(30*(numeral-6));//弧度（角度）
          console.log(angle);
          
          numeralWidth = context.measureText(numeral).width;//测量数字的宽度
          context.fillText(numeral,
          canvas.width/2 + Math.cos(angle)*(HAND_RADIUS) - numeralWidth / 2,//每个数字的Y坐标
          canvas.height/2 +Math.sin(angle) *(HAND_RADIUS) + FONT_HIGHT /3);//每个数字的x坐标
          
          console.log(HAND_RADIUS);
          console.log(canvas.width/2 + Math.cos(angle)*(HAND_RADIUS) - numeralWidth / 2);
          console.log(canvas.height/2 +Math.sin(angle) *(HAND_RADIUS) + FONT_HIGHT /3);
    });
}

//画时针
function drawHand(loc,isHour){
    var angle = (Math.PI *2) * (loc/60) - Math.PI/2,
            handRadius = (isHour === 1) ? RADIUS - HAND_TRUNCATION-HOUR_HAND_TRUNCATION :(isHour ===3) ? RADIUS - HAND_TRUNCATION : RADIUS - HAND_TRUNCATION-MINUTE_HAND_TRUNCATION ;
    context.moveTo(canvas.width/2,canvas.height/2);
    context.lineTo(canvas.width/2+Math.cos(angle)*handRadius,canvas.height/2 + Math.sin(angle)*handRadius);
        
    context.stroke();
}


function drawHands(){
    var date = new Date,
            hour = date.getHours();
    hour = hour > 12 ?hour -12:hour;
    drawHand(hour * 5 + (date.getMinutes()/60)*5 , 1);//时针
    drawHand(date.getMinutes(),2);//分针
    /**
     * 如何求时钟的秒针转动一圈的轨迹？

    假设秒针的初始值（起点）为12点钟方向，圆心的坐标为（a,b)。

    解决思路：一分钟为60秒，一个圆为360°，所以平均每秒的转动角度为 360°/60 = 6°；
     */
    drawHand(date.getSeconds(),3);//秒针
}

function drawClock(){
    context.clearRect(0,0,canvas.width,canvas.height);
    context.lineWidth = 5;
//    showCanvas();
        drawCircle();
        drawNumerals();
        drawCenter();
        drawHands();
}

context.font = FONT_HIGHT + 'px Arial';
 

loop = setInterval(drawClock,1000);//方法名
//console.log(loop);




        
